<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul class="ul">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <button>克隆</button>
    <ol>
        <li>一般的，节点至少拥有nodeType（节点类型），nodeName(节点名称)，nodeValue(节点值)这三个基本属性</li>
        <li>节点操作：（1）删除子节点：父节点.removeChild(子节点)；（2）复制节点：父节点.cloneNode()；</li>
        <li>动态创建元素：(1)document.write();(2)element.innerHTML;(3)document.createElement();<br>第一种创建会导致页面内容全部重新绘制；<br>第二种会将内容写入某个Dom节点，不会使页面重绘，
            并且创建多个元素效率更高（不要采取字符串拼接，采用数组形式拼接），结构稍微复杂;<br>第三种创建多个元素效率稍微低于第二种，但结构更清晰
        </li>
        <li>增加节点操作:(1)appendChild();(2)insertBefore();<br>第一种会在节点后面添加节点；<br>第二种会在节点前面添加节点</li>
        <li>修改普通元素内容可通过innerHTML,innerText修改；<br> 修改表单元素内容可通过value,type,disabled修改；<br> 修改元素属性可通过src,href,title修改；<br>
            修改元素样式可通过style,className修改</li>
        <li>查询节点操作：（1）DOM提供的API方法：getElementById,getElementByTagName <br>
            （2）H5提供的新方法：querySelector,querySelectorAll <br>（3）利用节点操作获取元素：父：parentNode,子：children,兄：previousElementSibling,nextElementSibling
        </li>
    </ol>
    <script>
        var ul = document.querySelector('ul');
        var btn = document.querySelector('button');
        const arr = ['1','2','3','4','5','6','7','8','9','10']
        btn.onclick = function () {
            var lili = ul.children[0].cloneNode(true);//括号为空或者是false，则为浅拷贝，只复制标签不复制内容；若括号内为true，则为深拷贝,会复制节点本身以及里面所有的子节点 
            ul.appendChild(lili);
        }
        
        //数组拼接
        // var array = [];
        // for (var i = 0; i < 100; i++) {
        //     array.push('<div style="width:100px;height:5px;backgroundColor:red;"></div>')
        // }
        // document.body.innerHTML = array.join('');


        console.log(ul.childNodes);
        console.log(ul.children);
        console.log(ul.attributes);
        console.log(ul.nodeName);
 

        // for( let str in arr){
        //     console.log(str); //遍历的是索引
        // }

        for(let str of arr){
            console.log(str); //了、遍历的是数组内的值
        }

        // function sleep(ms){
        //     return new Promise((resolve)=>setTimeout(resolve,ms));
        //     }
        // async function test(){
        //     var temple=await sleep(1000);
        //     console.log(1111)
        //     return temple
        //     }
        //     test(); 延迟 1000ms 输出了 1111


            function deepClone(obj){
                var newObj= obj instanceof Array?[]:{};
                for(var i in obj){
                newObj[i]=typeof obj[i]=='object' ? deepClone(obj[i]):obj[i];
                }
                console.log(newObj); 
                }

            const obj = ['1','4','3','4','5']
            const arr1 = {
                'name' : '张三',
                'age' : 20,
                'sex':'男'
            }
            deepClone(obj)
            deepClone(arr1)
    </script>
        

        
</body>

</html>